<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col fun-self-stretch section view" @click="toDetail('QuantitativeBondStrategyFundI')">
      <view class="fun-flex-row fun-items-center fun-self-stretch group_2">
        <text class="font">QuantitativeBondStrategyFundI</text>
        <text class="font_2 text_3 ml-37">OrderNo.123456</text>
      </view>
      <view class="fun-shrink-0 fun-self-start group_3"></view>
      <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch fun-relative group_4">
        <view class="section_2"></view>
        <text class="font_3 text_4 pos">38482.11</text>
      </view>
      <view class="fun-flex-row fun-justify-between equal-division group_5">
        <view class="fun-flex-col fun-items-start equal-division-item">
          <text class="font_2">Yield:</text>
          <text class="font_4 text_5 mt-13">18%</text>
        </view>
        <view class="fun-flex-col fun-items-start group_6 equal-division-item">
          <text class="font_2">Return:</text>
          <text class="font_4 text_6 mt-13">+6924.2</text>
        </view>
      </view>
      <view class="fun-shrink-0 fun-self-stretch divider"></view>
      <view class="fun-flex-row fun-justify-between fun-self-stretch group_7">
        <text class="font_5 text_7">Status:Holding</text>
        <text class="font_5">Expirydate:2024.6.29</text>
      </view>
    </view>
    <view class="fun-flex-col fun-self-stretch group_8" @click="toDetail('U.S.TreasurySecuritiesMoneyMarket')">
      <view class="fun-flex-col section">
        <view class="fun-flex-row fun-items-center fun-self-stretch group_2">
          <text class="font text_8">U.S.TreasurySecuritiesMoneyMarket...</text>
          <text class="font_2 text_3 text_9">OrderNo.123456</text>
        </view>
        <view class="fun-shrink-0 fun-self-start group_3"></view>
        <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch fun-relative group_4">
          <view class="section_2"></view>
          <text class="font_3 pos_2">105502.8</text>
        </view>
        <view class="fun-flex-row fun-justify-between equal-division group_9">
          <view class="fun-flex-col fun-items-start equal-division-item">
            <text class="font_2">Yield:</text>
            <text class="font_4 mt-13">5.50%</text>
          </view>
          <view class="fun-flex-col fun-items-start group_10 equal-division-item">
            <text class="font_2">Return:</text>
            <text class="font_4 mt-13">+5502.8</text>
          </view>
        </view>
        <view class="fun-shrink-0 fun-self-stretch divider"></view>
        <view class="fun-flex-row fun-justify-between fun-self-stretch group_7">
          <text class="font_5 text_10">Status:inRedemption</text>
          <text class="font_5">Expirydate:2024.6.29</text>
        </view>
      </view>
      <view class="fun-mt-16 fun-flex-col section" @click="toDetail('Globalhedgefund')">
        <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_2">
          <text class="font text_11">Globalhedgefund</text>
          <text class="font_2 text_3">OrderNo.123456</text>
        </view>
        <view class="fun-shrink-0 fun-self-start group_3"></view>
        <view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch fun-relative group_4">
          <view class="section_2"></view>
          <text class="font_3 text_12 pos_3">852,877.9</text>
        </view>
        <view class="fun-flex-row fun-justify-between equal-division group_11">
          <view class="fun-flex-col fun-items-start equal-division-item">
            <text class="font_2">Yield:</text>
            <text class="font_4 text_13 mt-13">42.14%</text>
          </view>
          <view class="fun-flex-col fun-items-start group_10 equal-division-item">
            <text class="font_2">Return:</text>
            <text class="font_4 text_14 mt-13">+252877.9</text>
          </view>
        </view>
        <view class="fun-shrink-0 fun-self-stretch divider"></view>
        <view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_7">
          <text class="font_2 text_15">Status:Finished</text>
          <text class="font_5">Expirydate:2024.6.29</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {
		toDetail(value){
			uni.navigateTo({url:`/pages/myPositions/productDetail?title=${value}`})
		}
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-37 {
    margin-left: 74rpx;
  }
  .mt-13 {
    margin-top: 26rpx;
  }
  .mt-9 {
    margin-top: 18rpx;
  }
  .page {
    padding: 32rpx 32rpx 180rpx 32rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 68rpx;
      padding-right: 28rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .text_2 {
      margin-top: 64rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-family: SF Pro Display;
      font-weight: 300;
      line-height: 28.42rpx;
    }
    .section {
      background-color: #1b1d53;
      border-radius: 16rpx;
      .group_2 {
        padding: 28rpx 16rpx 8rpx 24rpx;
        .font {
          font-size: 28rpx;
          font-family: SF Pro Display;
          line-height: 26.26rpx;
          font-weight: 700;
          color: #ffffff;
        }
        .text_3 {
          line-height: 14.54rpx;
        }
        .text_8 {
          line-height: 26.16rpx;
        }
        .text_9 {
          margin-left: -12rpx;
        }
        .text_11 {
          line-height: 25.6rpx;
        }
      }
      .group_3 {
        margin-left: 14rpx;
        filter: blur(3.5rpx);
        width: 214rpx;
        height: 8rpx;
      }
      .group_4 {
        margin-top: 16rpx;
        .section_2 {
          background-color: #1b1d53;
          width: 228rpx;
          height: 76rpx;
        }
        .font_3 {
          font-size: 56rpx;
          font-family: SF Pro Display;
          line-height: 41.24rpx;
          font-weight: 700;
          color: #ffffff;
        }
        .text_4 {
          line-height: 41.2rpx;
        }
        .pos {
          position: absolute;
          left: 26.66rpx;
          top: 0;
        }
        .pos_2 {
          position: absolute;
          left: 20.54rpx;
          top: 0;
        }
        .text_12 {
          line-height: 48.98rpx;
        }
        .pos_3 {
          position: absolute;
          left: 26.28rpx;
          top: 0;
        }
      }
      .equal-division {
        align-self: flex-start;
        .equal-division-item {
          padding: 8rpx 0;
          .text_5 {
            line-height: 20.6rpx;
          }
          .text_13 {
            line-height: 20.46rpx;
          }
        }
        .group_6 {
          margin-right: 88rpx;
          .text_6 {
            line-height: 20.6rpx;
          }
        }
        .font_4 {
          font-size: 28rpx;
          font-family: SF Pro Display;
          line-height: 20.62rpx;
          font-weight: 700;
          color: #5ceec4;
        }
        .group_10 {
          margin-right: 60rpx;
          .text_14 {
            line-height: 20.46rpx;
          }
        }
      }
      .group_5 {
        padding: 0 24rpx;
        width: 485.84rpx;
      }
      .divider {
        margin: 20rpx 24rpx 0;
        background-color: #ffffff33;
        height: 2rpx;
      }
      .group_7 {
        padding: 28rpx 16rpx 24rpx 24rpx;
        .font_5 {
          font-size: 20rpx;
          font-family: SF Pro Display;
          line-height: 17.98rpx;
          font-weight: 300;
          color: #ffffff;
        }
        .text_7 {
          line-height: 18.08rpx;
        }
        .text_10 {
          line-height: 17.68rpx;
        }
        .text_15 {
          line-height: 14.54rpx;
        }
      }
      .group_9 {
        padding: 0 24rpx;
        width: 458.48rpx;
      }
      .group_11 {
        padding: 0 24rpx;
        width: 490.08rpx;
      }
    }
    .group_8 {
      margin-top: 32rpx;
    }
    .section_3 {
      margin-top: 178rpx;
      background-color: #1b1d53;
      height: 85.3rpx;
      border-top: solid 2rpx #00000012;
      .group_12 {
        flex: 1 1 187.5rpx;
        .image_4 {
          width: 48rpx;
          height: 48rpx;
        }
        .text_16 {
          color: #8d8ea9;
          font-size: 18rpx;
          line-height: 12.86rpx;
          font-weight: unset;
        }
        .text_17 {
          opacity: 0.5;
        }
        .text_18 {
          font-size: 18rpx;
          line-height: 13.08rpx;
        }
        .text_19 {
          font-size: 18rpx;
          line-height: 15.98rpx;
        }
        .text_20 {
          font-size: 18rpx;
          line-height: 15.98rpx;
        }
      }
      .equal-division-item_2 {
        padding: 4rpx 0 16rpx;
      }
    }
    .font_2 {
      font-size: 20rpx;
      font-family: SF Pro Display;
      line-height: 14.26rpx;
      font-weight: 300;
      color: #ffffff;
    }
  }
</style>